<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--jquery的绝对路径-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!--首页的js-->
    <script src="js/index.js"></script>
    <!--首页的css-->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入js -->
    <script src="js/newest.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #F7F6F6;
        }

        .title {
            width: 100%;
            height: 100px;
            text-align: center;
            background-color: #fff;
            padding-top: 85px;
        }

        h1 {
            font-weight: normal;
            margin-bottom: 18px;
        }

        .title .orange {
            border-bottom: 2px solid orange;
        }

        .title span {
            display: inline-block;
            width: 150px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            box-sizing: border-box;
        }

        .goods {
            width: 100%;
            height: 100%;
        }


        .box {
            width: 500px;
            height: 400px;
            box-sizing: border-box;
            margin: 10px auto;
            overflow: hidden;
            border-radius: 10px;
            border: 1px solid #333;
        }

        .p {
            margin-top: 20px;
            width: 100%;
            height: 40px;
        }

        .img {
            width: 100%;
            height: 300px;
            background-color: #333;
        }

        .img img {
            width: 100%;
            height: 100%;
        }

        .p,
        .uname {
            margin-left: 20px;
        }

        .uname {
            color: rgb(255, 89, 0);
            margin-right: 10px;
        }

        .apply,
        .totalnum {
            display: inline-block;
            float: right;
            margin: 0 8px;
        }

        .p2 {
            width: 500px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #fff;
            margin: 5px auto;
            color: #666;
            font-size: 12px;
            border-radius: 8px;
            border: 1px solid #666;
            margin-bottom: 40px;
        }

        .footer {
            position: relative;
            width: 100%;
            height: 400px;
            background-color: #333;
        }

        .ewm {
            position: absolute;
            top: 50px;
            left: 150px;
            width: 100px;
            height: 100px;
            background-color: #fff;
        }

        .mao {
            width: 25px;
            height: 100px;
            background-color: #000;
            color: #eee;
            float: right;
            border-radius: 5px;
            text-align: center;
        }

        .p3 {
            font-size: 30px;
            font-family: '隶书';
            position: absolute;
            top: 20px;
            left: 500px;
            color: #999;
        }

        .banner {
            position: relative;
        }
    </style>
</head>

<body>
    <!-- 头部模块 -->
    <div class="head">
        <div class="w nav">
            <div class="logo">
                <img src="images/logo.png" alt="">
            </div>
            <ul class="ul1">
                <li>
                    <a href="index.html" class="a">首页</a>
                </li>
                <li>
                    <a href="cool_new.html" class="a">酷玩</a>
                </li>
                <li>
                    <a href="guid.html" class="a">导购</a>
                </li>
                <li>
                    <a href="public.html" class="a">试用</a>
                </li>
                <li>
                    <a href="#" class="a or">报告</a>
                </li>
            </ul>
            <div class="right">
                <div class="big">
                    <div class="circle"></div>
                    <div class="bar"></div>
                </div>
                <div class="regest">
                    <a href="./regis.html">注册</a>
                </div>
            </div>
        </div>
    </div>
    <div class="title" id="title">
        <h1>体验报告</h1>
        <span class="orange" id="newest">最新</span>
        <span id="hotest">最热</span>
    </div>
    <div class="banner"></div>
    <!-- 点击加载更多 -->
    <div class="clickmore">
        <span class="dow"></span>
        &nbsp;点击加载更多
    </div>
    <!-- 底部部分 -->
    <footer>
        <div class="w hei">
            <div class="ewm">
                <img src="images/ewm.jpg" alt="">
            </div>
            <div class="footright">
                <dl class="log">
                    <dd><img src="images/logo.png" alt=""></dd>
                    <p>
                        全球酷玩试用导购平台酷新奇·好玩·品质
                    </p>
                    <p>
                        微信添加"JguoJguo"获取我们的服务
                    </p>
                </dl>
                <div class="dl">
                    <dl>
                        <dt>免费试用</dt>
                        <dd>试用流程</dd>
                        <dd>如何提高成功率</dd>
                        <dd>搜狐IT</dd>
                        <dd>关于极果</dd>
                        <dd>泡泡网</dd>
                    </dl>
                    <dl class="mt30">
                        <dt>友情链接</dt><br>
                        <dd>搜狐IT</dd>
                        <dd>泡泡网</dd>
                        <dd>智东西</dd>
                        <dd>搜狐IT</dd>
                        <dd>凤凰数码</dd>
                        <dd>关于极果</dd>
                        <dd>泡泡网</dd>

                    </dl>
                    <dl>
                        <dt>购买攻略</dt>
                        <dd>美亚海淘教程</dd>
                        <dd>搜狐IT</dd>
                        <dd>泡泡网</dd>
                        <dd>关于极果</dd>
                        <dd>日亚海淘教程</dd>
                    </dl>
                    <dl>
                        <dt>厂商合作</dt>
                        <dd>关于极果</dd>
                        <dd>搜狐IT</dd>
                        <dd>泡泡网</dd>
                        <dd>关于极果</dd>
                        <dd>关于极果</dd>
                        <dd>如何提高成功率</dd>
                    </dl>
                </div>
                <p class="copyright">
                    Copyright © 2022 极果 All rights reserved.
                </p>
            </div>
        </div>
    </footer>
</body>

</html>
<script>

    window.addEventListener('load', function () {
        var goods = document.querySelector('.goods');
        var banner = document.querySelector('.banner');
        var footer = document.querySelector('.footer');
        var newest = document.querySelector('#newest');
        var hotest = document.querySelector('#hotest');
        var ne = '';
        autofn();
        function autofn() {
            newest.onclick = function () {
                ne = 'http://localhost:3000/report/new';
                hotest.className = '';
                newest.className = 'orange';
                dog(ne);
            }
            newest.click();

            newest.addEventListener('click', function () {
                ne = 'http://localhost:3000/report/new';
                banner.innerHTML = '';
                hotest.className = '';
                newest.className = 'orange';
                dog(ne);
            })
            hotest.addEventListener('click', function () {
                ne = 'http://localhost:3000/report/hot';
                banner.innerHTML = '';
                newest.className = '';
                hotest.className = 'orange';
                dog(ne);
            })
            function dog(ne) {
                var ajax1 = new XMLHttpRequest();
                ajax1.open('get', ne, true);
                ajax1.send();
                ajax1.onreadystatechange = function () {
                    if (ajax1.readyState == 4) {
                        if (ajax1.status == 200) {
                            var str = ajax1.responseText;
                            var json_ = JSON.parse(str);
                            for (var i = 0; i < json_.length; i++) {
                                var good = `
                        <div class="goods">
                           <div class="box">
                               <div class="img">
                                    <img src="${json_[i].img}" alt="">
                                </div>
                               <div class="p">${json_[i].text}</div>
                               <span class="uname">${json_[i].uName}</span>
                               <span class="endTime">${json_[i].endTime}</span>
                               <span class="apply">${json_[i].apply}</span>
                               <span class="totalnum">${json_[i].totalnum}</span>
                           </div>
                       </div>
                       <div class="p2">${json_[i].text}</div>
                        `;
                                banner.innerHTML += good;
                            }
                        } else {
                            console.log('请求失败');
                        }
                    }
                }
            }
        }
        $(".clickmore").on("click", function () {
            autofn();
        })
    })
</script>